<template id="app">
<div >
      <header class="head">
          
          <span>
              <p><router-link tag="span"  to="day1">&lt</router-link></p>
              <p>订单</p>
          </span>
           <span></span>
      </header>


 <section class="bo">


            <section class="img">
                <img src="//fuss10.elemecdn.com/f/18/9fb04779371b5b162b41032baf5f3gif.gif" alt="">
            </section>


           <section class="tit"><h3>登录后查看外卖订单</h3></section> 

           <section class="btn">
               <button>立即登录</button>
           </section> </section>
</div>

</template>
<script>
export default {
  
}
</script>

<style lang="less">
    .px2rem(@prop,@px) {
  @{prop}: @px /75 * 1rem;
}
 .bo{
     
      width: 100%;
     height: 100%;
    background-image: url(../assets/back.png);
    background-size:100% 100%;
    padding-top:45%;
     padding-bottom:55%;
   
     
   }
    .head{
        background: rgb(0, 142, 255);
        .px2rem(height,40);
        display: flex;
        justify-content: space-between;
        align-items: center;
        span{
            width:50%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .px2rem(font-size,35);
            text-align: center;
            color: #fff;
            font-weight: bold;
            
        }
        
    }
    .img{
        width: 100%;
        // margin-top: 35%;
         text-align:center;
        img{
            width: 50%;
           
        }
    }
    .tit{
        width: 100%;
        text-align: center;
        h3{
            .px2rem(font-size,35);
            font-weight: bold;
        }
    }
    .btn{
     width: 100%;
     text-align: center;
    //  margin-top: 10%;
  
     button{
     background: rgb(86, 209, 118);
     color: #fff; 
     outline: none;
     border: none;
     .px2rem(height,70);
     .px2rem(width,180);
     }
    }
</style>
